<!DOCTYPE html>
{% include 'navbar.html' %}
<html lang="en">
<head>
    <style>
        .col-md-8 {
            margin-left: auto;
            margin-right: auto;
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 25pt;
            padding: 15pt 10pt 10pt 20pt;
        }

        body {
            font-family: "Segoe UI";
            background: rgb(237, 238, 239);
        {#background: linear-gradient(0deg, rgba(44, 255, 210, 0.92) 0%, rgba(69, 165, 195, 0.92) 55%) no-repeat fixed;#}
        }
    </style>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body onload="load_function()">

<div class="container">
    <div class="row justify-content-center">
        <div>
            <h1 class="mt-2" style="color: rgb(54,151,212)">Choose room for you</h1>
            <hr class="mt-0 mb-4">

        </div>
    </div>
</div>

<div class="col-md-8">
    <h3 class="mt-1" style="color: black">Available rooms between {{ start_date }} and {{ end_date }}:</h3>
    <table class="table">
        <thead class="thead-light" style="color: black">
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Description</th>
            <th scope="col" style="width: 78pt;text-align: center">Total price</th>
            <th scope="col"></th>
        </tr>
        </thead>
        <tbody>
        {% for room in free_rooms %}
            <tr>
                <td style="color: black;">{{ room.name }}</td>
                <td style="color: black;">{{ room.description }}</td>
                <td style="color: black;text-align: center" id="price{{ room.id }}"
                    class="sum">{{ room.price }}*{{ length }}</td>
                {#                <form style="display: inline;">#}
                <td>
                    {#                        <button type="submit" class="btn btn-light" id="button{{ room.id }}"#}
                    {#                                formmethod="post" formaction="/room/search/reservation/{{ room.id }}:{{ start_date }}:{{ end_date }}/">#}
                    {#                            Reservation#}
                    {#                        </button>#}
                    {% csrf_token %}
                    {% if user.is_authenticated %}
                        <button class="btn btn-light" id="button{{ room.id }}"
                                onclick="reservation_room({{ room.id }})">
                            Reservation
                        </button>
                    {% else %}
                        <button class="btn btn-light" id="button{{ room.id }}"
                                onclick="location.href = '/account/login/'">
                            Log in to book
                        </button>
                    {% endif %}
                </td>
                {#                </form>#}
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
<script>
    function reservation_room(room_id) {
        if (confirm(`Are you sure that you want to book room?`)) {
            var btn = document.getElementById(`button${room_id}`);
            var price = document.getElementById(`price${room_id}`);
            price = price.innerText;
            btn.disabled = true;
            var x = document.getElementsByName("csrfmiddlewaretoken");
            x = x[0].value;
            console.log(x);
            var xhr = new XMLHttpRequest();
            var url = 'room/';
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send(`start_date={{ start_date }}&end_date={{ end_date }}&room_id=${room_id}&price=${price}&csrfmiddlewaretoken=${x}`);
            console.log(xhr.getAllResponseHeaders());
            console.log(xhr.response)
        }

    }

    function load_function() {
        var column = document.getElementsByClassName('sum');
        for (var i = 0; i < column.length; i++) {
            var all_string = column[i].innerHTML;
            var before = all_string.substr(0, all_string.indexOf('*'));
            var after = before * {{ length }};
            column[i].innerHTML = after;
        }
    }

    function requestPost() {
        var x = document.getElementsByName("csrfmiddlewaretoken");
        x = x[0].value;
        var choice = x;
        console.log(x);
        var xhr = new XMLHttpRequest();
        var url = '/';
        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(`start_date={{ start_date }}&end_date={{ end_date }}&csrfmiddlewaretoken=${x}`);
    }
</script>
</body>
</html>